<template>
	<div id="ttttt">
		<el-dialog :title="title" :modelValue="show" @close="close" :destroy-on-close="true" custom-class="dia"
			:center="true" :width="width" style="margin: 15vh auto;">
			<config :config="form" v-if="type" />
			<FormAttr v-else :config="form" :params="params" :rules="rules" ref="validate" :stepList="stepList"
				:isStep="isStep" :stepChange="stepChange" :label-width="labelWidth" >

          <template v-for="(item,index) in form.filter(cite => cite.model === 'comm')" #[item.field]="scope" :key="index">
            <slot :name="item.field" v-bind="scope || {}"> </slot>
          </template>


      </FormAttr>
			<template #footer>
				<slot name="footer"></slot>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import config from '/@/components/from/SystemConfig.vue'
	import FormAttr from '/@/components/from/FormAttr.vue'
	import {
		ref,
		defineComponent,
		watch,
		onMounted,
		nextTick
	} from "vue"
	export default {
		components: {
			config,
			FormAttr
		},
		props: {
			stepChange: {
				type: Function,
				default: (step) => {

				}
			},
			isStep: {
				type: Boolean,
				default: false
			},
			stepList: {
				type: Array,
				default: () => {
					return []
				}
			},
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ""
			},
			form: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: Boolean,
				default: true
			},
			params: {
				type: Object,
				default: () => {
					return {}
				}
			},
			rules: {
				type: Object,
				default: () => {
					return {}
				}
			},
			width: {
				type: String,
				default: '770px'
			},
			labelWidth: {
				type: Number,
				default: 120
			}
		},
		setup(props, {
			emit
		}) {
			onMounted(() => {
				var dd = document.getElementById('ttttt').childNodes[1]
			})
			const close = () => {
				emit("update:show", false);
				return true;
			}
			const validate = ref(null);
			const valid = (func) => {
				validate.value.validate(func)
			}
			watch(() => props.show, (nld, old) => {

				nextTick(function() {
					document.getElementById('ttttt').childNodes[1].style.zIndex = '99'
				})
				if (props.type === false && nld && validate.value != null) {
					validate.value.resetFields()
				}
			})

			const upnext = () => {
				validate.value.upnext()
			}
			const next = () => {
				validate.value.next()
			}



			return {
				close,
				validate,
				valid,
				upnext,
				next
			}
		}

	}
</script>

<style>
	.dia {
		z-index: 100;
		margin: 200px auto;

	}
</style>
